<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>实现简易vue</title>
    <!-- 引入库文件 -->
    <script src="./lib/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <h3>{{ title }}</h3>
      <div v-html="title" uname="abc"></div>
      <input type="text" v-model="title" />
    </div>

    <script>
      const app = new Vue({
        // el:document.querySelector('#app'),
        el: '#app',
        // 数据初始化时需要进行递归来劫持数据,从而导致初始化时可能性能慢一些
        // 在开发过程中,尽可能的不要去进行多层级数据定义
        data: {
          arr: [1, 2, 3],
          age: 10,
          title: 'vue简易实现',
          user: { id: 1, name: '张三' }
        }
      })

      let arr = [0]

      setTimeout(() => {
        app.arr.push(666)
        // arr.push(111)
      }, 3000)
    </script>
  </body>
</html>
